import * as TE from 'TEngine';
import * as THREE from 'three';
import { Pane } from 'tweakpane';
const TS = new TE.TEngine();
TS.camera.position.set(10, 10, 10);
TS.camera.lookAt(0, 0, 0);

const axes = new THREE.AxesHelper(5);
TS.scene.add(axes);

const sphereGroup = new THREE.Group();
TS.scene.add(sphereGroup);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });

let innerData = [];
//创建小球的函数
const createBox = (number, distance, count) => {
  sphereGroup.clear();
  innerData = [];
  //按照x来计算
  for (let i = 0; i < number; i++) {
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const cube = new THREE.Mesh(geometry, material);
    cube.position.x = i * distance;
    if (i !== number - 1) {
      innerData.push(i * distance + distance / 2);
    }
    sphereGroup.add(cube);
  }

  boxInner(count);
};

const material2 = new THREE.MeshBasicMaterial({ color: 'red', wireframe: true });
//开始创建两个方块之间的间隔数据
const boxInner = (count) => {
  //计算盒子数据
  // let count = 3;

  for (let s = 0, t = innerData.length; s < t; s += count) {
    const sphere = new THREE.SphereGeometry(0.5);
    const sphereMesh = new THREE.Mesh(sphere, material2);
    sphereMesh.position.set(innerData[s], 0, 0);
    sphereGroup.add(sphereMesh);
  }

  const result = (innerData.length - 1) % count;
  console.log(innerData.length, 'dedede');

  if (result > 0) {
    const sphere = new THREE.SphereGeometry(0.5);
    const sphereMesh = new THREE.Mesh(sphere, material2);
    sphereMesh.position.set(innerData[innerData.length - 1], 0, 0);
    sphereGroup.add(sphereMesh);
  }
};

const param = {
  number: 10, //生成方块的数量
  distance: 4, //生成方块的间隔
  count: 3,
};

createBox(param.number, param.distance, param.count);

//创建一个gui的面板
const panel = new Pane();
panel.addBinding(param, 'number', { step: 1, label: '生成方块的数量' }).on('change', (res) => {
  createBox(param.number, param.distance, param.count);
});
panel.addBinding(param, 'distance').on('change', (res) => {
  createBox(param.number, param.distance, param.count);
});
panel.addBinding(param, 'count', { step: 1 }).on('change', (res) => {
  createBox(param.number, param.distance, param.count);
});
